<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-24 16:31:23
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-25 15:32:05
-->
<template>
    <div class="box">
        <div class="itemList">
            <div class="item" v-for="(item, index) in listData" :key="index">
                <div class="itemLeft">
                    <div class="Icon">
                        <i
                            class="el-icon-date
"
                        ></i>
                    </div>
                    <div class="itemInfo">
                        <div class="title ShengLue">{{ item.name }}</div>
                        <div class="date">
                            {{ item.create_time }}
                        </div>
                    </div>
                </div>
                <div>
                    <el-button type="text" @click="selectLessonID(item)"
                        >设置课时</el-button
                    >
                </div>
            </div>
            <div v-if="listData.length == 0" class="noMore">
                -- 暂无数据 --
            </div>
            <!-- //分页 -->
            <div class="bottomPagination">
                <el-pagination
                    :current-page="currentPage"
                    layout="prev, pager, next"
                    small
                    :page-size="pageSize"
                    :total="total"
                    @current-change="handleCurrentChange"
                />
            </div>
        </div>
        <div class="rightBox">
            <el-card style="min-height: 700px;">
                <div class="row">
                    <div>
                        <el-button type="primary" size="mini" @click="addOne"
                            >创建课时</el-button
                        >
                    </div>
                    <div v-if="lessonID">
                        <el-button size="mini" type="success" @click="newLesson"
                            >添加课时</el-button
                        >
                    </div>
                </div>
                <div class="title">课时名：{{ lessonName }}</div>
                <div class="rightList">
                    <div
                        v-for="(lesitem, lesindex) in lessonList"
                        :key="lesindex"
                    >
                        <div class="listItem">
                            <div>{{ lesitem.lesson_name }}</div>
                            <div class="rightSelect">
                                <div>
                                    <el-time-picker
                                        is-range
                                        v-model="lesitem.timeValue"
                                        range-separator="至"
                                        start-placeholder="开始时间"
                                        end-placeholder="结束时间"
                                        placeholder="选择时间范围"
                                        size="mini"
                                    >
                                    </el-time-picker>
                                </div>
                                <div style="margin-left:10px">
                                    <el-button
                                        size="mini"
                                        type="primary"
                                        @click="
                                            SaveStuTimeLesson(lesitem, lesindex)
                                        "
                                        >保存</el-button
                                    >
                                    <el-button
                                        v-if="lesitem.unid"
                                        size="mini"
                                        type="danger"
                                        @click="
                                            DelStuTimeLesson(
                                                lesitem.unid,
                                                lesindex
                                            )
                                        "
                                        >删除</el-button
                                    >
                                </div>
                            </div>
                        </div>
                        <el-divider></el-divider>
                    </div>
                    <div v-if="lessonList.length == 0" class="noMore">
                        -- 暂无课时 --
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import {
    getStuTime,
    toSaveStuTime,
    getStuTimeLesson,
    toSaveStuTimeLesson,
    toDelStuTimeLesson
} from "@/api/table/index";
import { getFormatTime } from "@/utils/timeUtils";
export default {
    data() {
        return {
            pageSize: 5,
            currentPage: 1,
            total: 0,
            listData: [],
            timeDay: ["一", "二", "三", "四", "五", "六", "七", "八"],
            lessonID: "",
            lessonName: "",
            lessonList: []
        };
    },
    created() {
        this.getStuSemester();
    },
    methods: {
        async getStuSemester() {
            var query = {
                limit: this.pageSize,
                page: this.currentPage,
                usr_id: this.$store.getters.userInfo.id
            };
            var list = await getStuTime(query);
            if (list.code == 200) {
                this.listData = list.data.list;
                this.total = list.data.total;
            }
            console.log("拉取时段：", list);
        },
        addOne() {
            this.$prompt("请输入时段名称", "设置时段名称", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                inputPattern: /\S/,
                inputErrorMessage: "时段名称不能为空"
            })
                .then(async ({ value }) => {
                    var query = {
                        name: value,
                        usr_id: this.$store.getters.userInfo.id
                    };
                    var list = await toSaveStuTime(query);
                    console.log("设置时段名称", list);
                    if (list.code == 200) {
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "创建成功!"
                        });
                        this.getStuSemester();
                    } else {
                        this.$message.error(list.message);
                    }
                })
                .catch(() => {});
        },
        async selectLessonID(item) {
            var query = {
                time_main_id: item.unid
            };
            var list = await getStuTimeLesson(query);
            console.log("学生时间段", list);
            if (list.code == 200) {
                this.lessonID = item.unid;
                this.lessonName = item.name;
                var arr = list.data.list;
                arr.forEach((el, index) => {
                    let date = el.update_time.split(" ");
                    arr[index].timeValue = [
                        new Date(date[0] + " " + el.lesson_start),
                        new Date(date[0] + " " + el.lesson_end)
                    ];
                });

                this.lessonList = arr;
            } else {
                this.$message.error(list.message);
            }
        },
        newLesson() {
            if (this.lessonList.length >= 8) {
                return this.$message({
                    message: "最多只能设置八节课~",
                    type: "warning"
                });
            }
            var item = {
                lesson_name: `第${this.timeDay[this.lessonList.length]}节`,
                timeValue: [
                    new Date(2020, 1, 1, 0, 0),
                    new Date(2020, 1, 1, 0, 0)
                ]
            };
            this.lessonList.push(item);
        },
        async SaveStuTimeLesson(item, index) {
            var start = getFormatTime(
                new Date(item.timeValue[0]).getTime()
            ).split(" ")[1];
            var end = getFormatTime(
                new Date(item.timeValue[1]).getTime()
            ).split(" ")[1];

            var query = {
                time_main_id: this.lessonID,
                lesson_name: item.lesson_name,
                lesson_start: start,
                lesson_end: end
            };
            if (item.unid) {
                query.unid = item.unid;
            }
            var list = await toSaveStuTimeLesson(query);
            console.log("学生时间段", list);
            if (list.code == 200) {
                let date = list.data.update_time.split(" ");
                list.data.timeValue = [
                    new Date(date[0] + " " + list.data.lesson_start),
                    new Date(date[0] + " " + list.data.lesson_end)
                ];
                // this.lessonList[index] = list.data;
                this.lessonList.splice(index, 1, list.data);
                this.$message({
                    type: "success",
                    customClass: "customClass",
                    message: "保存成功!"
                });
                // this.selectLessonID(this.lessonID);
            } else {
                this.$message.error(list.message);
            }
        },
        // toDelStuTimeLesson
        DelStuTimeLesson(unid, index) {
            this.$confirm("此操作将删除该课时, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(async () => {
                    var query = {
                        unid
                    };
                    var list = await toDelStuTimeLesson(query);
                    console.log("删除课时", list);
                    if (list.code == 200) {
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "删除成功!"
                        });
                        this.lessonList.splice(index, 1);
                    } else {
                        this.$message.error(list.message);
                    }
                })
                .catch(() => {});
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getStuSemester();
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    width: 100%;
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .itemList {
        width: 32%;

        .item {
            width: 100%;
            border: solid 1px #e9e9e9;
            border-radius: 4px;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            box-sizing: border-box;
            margin-right: 2%;
            margin-bottom: 15px;
            cursor: pointer;
            &:hover {
                box-shadow: 5px 5px 5px #eeeeee;
            }

            .itemLeft {
                display: flex;
                align-items: center;
            }

            .Icon {
                width: 60px;
                height: 60px;
                background: #00d5a2;
                border-radius: 50%;
                text-align: center;
                line-height: 60px;
                font-size: 38px;
                color: #ffffff;
            }

            .itemInfo {
                margin-left: 10px;
                line-height: 25px;

                .title {
                    font-size: 16px;
                    font-weight: 600;
                }

                .date {
                    font-size: 14px;
                    color: #999999;
                }
            }
        }
    }

    .rightBox {
        width: 65%;

        .title {
            font-size: 16px;
            font-weight: 600;
            color: #6d7785;
            margin-bottom: 20px;
        }

        .rightList {
            .listItem {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .rightSelect {
                    display: flex;
                    align-items: center;
                }
            }
        }
    }

    //省略文本
    .ShengLue {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #6d7785;
    }

    .bottomPagination {
        padding: 15px 0;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    .noMore {
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #6d7785;
        margin: 100px 0;
    }
}
</style>
